<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!---外部样式文件需要使用link标签引入---->
		<link rel="stylesheet" href="css/base.css" />
		
		<style type="text/css">
			/**内部样式**/
			/***标签选择器***/
			p{
				text-align: center;
				color: yellow;
			}
			
			/***类选择器***/
			.textStyle{
				text-align : center;
				color: yellow;
			}
			
			/***ID选择器***/
			#tdHead{
				background-color:yellow;
			}
			
			/****派生选择器***/
			#tdHead p font{
				font-size: larger;
			}
			
			/***body的背景样式设置****/
			body{
				/**各个属性维度分开进行赋值**/
				/*
				background-color: gray;
				background-image: url(imgs/bg.jpg);
				background-repeat: repeat;
				background-attachment: fixed;
				background-position: 50%;
				*/
				/**综合方式进行赋值**/
				background: gray url(imgs/bg.jpg) repeat fixed 50% ;
			}
			
			/**赋值顺序**/
			font{
				margin: 30px;
				/**等价于*/
				/*margin-top: 30px;
				margin-right: 30px;
				margin-bottom: 30px;
				margin-left: 30px;*/
			}
			
		</style>
	</head>

	<body>
		<table align="center" width="1000px">
			<tr>
				<!--写在空间style属性中的样式是内联样式-->
				<td id="tdHead" style="height: 60px; width:100%; background-color: red;">
					<p><font>头部1</font><font>头部2</font></p>
				</td>
			</tr>
			<tr>
				<td style="height: 600px; width:100%;">
					<table height="100%" width="100%">
						<tr>
							<td width="30%" height="100%" bgcolor="aqua"><p><font>左部主体</font></p></td>
							<td  height="100%" width="70%" bgcolor="coral"  class="textStyle">右部主体</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height: 40px; width:100%; background-color: pink;" class="textStyle">页脚</td>
			</tr>
		</table>
	</body>

</html>